/* 头部  */


.m15-header-box {
    height: 1.05rem;
    background: url("@/assets/img/images/home_head_title.png") no-repeat center center;
    background-size: 100% 100%;
    position: relative;
    z-index: 100;
}

.m15-header-box h1 {
    color: red;
    text-align: center;
    font-size: .4rem;
    line-height: .8rem;
}

.m15-header-box h1 img {
    width: 1.5rem;
    display: inline-block;
    vertical-align: middle;
    margin-right: .2rem
}



/* 主体部分  */
.main {
    width: 100%; /* 设置主体部分宽度为100% */
    height: 100%; /* 设置主体部分高度为100% */
    display: grid; /* 使用grid布局 */
    grid-template-columns: 1fr 4fr; /* 定义网格列布局，比例为1:4 */
    grid-template-rows: 1fr 3fr 2fr; /* 定义网格行布局，比例为1:3:2 */
    gap: 10px; /* 网格间隙为10px */
}

.main div:nth-child(1) {
    grid-column: 1/3; /* 第一个子元素跨越两列 */

}

.main div:nth-child(2) {
    grid-row: 2/4; /* 第二个子元素跨越从第二行到第四行 */

}

/* 第一个模块  */
.modulefirst {
    height: 100%; /* 设置第一个模块高度为100% */
    background: rgba(6, 30, 60, .5); /* 设置背景颜色为半透明的深蓝色 */
}

.modulefirst ul {
    width: 100%; /* 设置ul宽度为100% */
    height: 100%; /* 设置ul高度为100% */
    display: flex; /* 使用flex布局 */
    justify-content: space-between; /* 子元素两侧对齐 */
    align-items: center; /* 子元素垂直居中对齐 */
}

.modulefirst ul li {
    flex: 1; /* 子元素均分空间 */
    height: 80%; /* 子元素高度为父元素的80% */
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 子元素垂直方向排列 */
    justify-content: center; /* 子元素垂直居中对齐 */
    align-items: center; /* 子元素水平居中对齐 */
    border-left: 2px solid #08395A; /* 左边框为2px实线，颜色为深蓝色 */
    border-right: 2px solid #08395A; /* 右边框为2px实线，颜色为深蓝色 */
}

.modulefirst-title {
    font-size: 20px; /* 设置标题字体大小为20px */
    margin-bottom: 20px; /* 底部外边距为20px */
}

.modulefirst-num {
    font-size: 30px; /* 设置数字字体大小为30px */
    font-weight: 600; /* 设置数字字体加粗 */
}

.modulefirst-unit {
    margin-left: 10px; /* 左侧外边距为10px */
}

.modulefirst ul li:nth-child(3n+1) .modulefirst-num {
    color: #458AE6; /* 每第3个li元素的数字字体颜色为浅蓝色 */
}

.modulefirst ul li:nth-child(3n+2) .modulefirst-num {
    color: #F46827; /* 每第3个li元素的数字字体颜色为橙色 */
}

.modulefirst ul li:nth-child(3n+3) .modulefirst-num {
    color: #40FAEE; /* 每第3个li元素的数字字体颜色为青色 */
}

/* 边框样式  */
.bgstyle {
    height: 100%; /* 设置高度为100% */
    background-color: #0D2049; /* 设置背景颜色为深蓝色 */
    border-top: 2px solid #0B3E6B; /* 顶部边框为2px实线，颜色为深蓝色 */
}

/* 第三个模块  */
.modulethird {
    display: flex; /* 使用flex布局 */
}

.modulethird-left {
    flex: 0 1 60%; /* 左侧占据60%的空间 */
}

.modulethird-right {
    flex: 0 1 40%; /* 右侧占据40%的空间 */
}

/* 水位图  */
.waterpond {
    width: 100%; /* 设置宽度为100% */
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 子元素居中对齐 */
}

.waterpond-title {
    font-size: 20px; /* 设置标题字体大小为20px */
    margin: 10px 0; /* 上下外边距为10px，左右外边距为0 */
    font-weight: 600; /* 设置标题字体加粗 */
}

.waterpond-detail {
    font-weight: 600; /* 设置文本字体加粗 */
    padding: 0 10px; /* 上下内边距为0，左右内边距为10px */
}

.waterpond-detail span {
    color: #F46827; /* 设置span元素文字颜色为橙色 */
    font-size: 30px; /* 设置span元素文字大小为30px */
}

/* 第四个模块 */
.modulefourth-list ul {
    display: flex; /* 使用flex布局 */
    width: 100%; /* 设置宽度为100% */
    gap: 10px; /* 元素之间间隔为10px */
}

.modulefourth-list ul li {
    flex: 1; /* 子元素均分空间 */
    display: flex; /* 使用flex布局 */
}

.peichart {
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 垂直方向排列 */
    width: 100%; /* 设置宽度为100% */
}

.peichart h2 {
    padding: 5px; /* 内边距为5px */
}
